<template>
  <div v-loading="loading" class="page_view_list">
    <div class="page_number">
      <div v-for="(item,index) in page_number" :key="index" @click="getData(item)">{{item}}</div>
    </div>
    <div>
      <div class="list" v-for="(item,index) in page_list" :key="index">
        <page_item :dom="item.dom" />
        <div class="title">{{item.pageTitle}}</div>
        <div class="hover">
          <el-button @click="updatePageName(item)" round>更改页面名</el-button>
          <el-button @click="edit_page(item)" round>编辑页面</el-button>
          <el-button @click="domload(item)" round>下载页面</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="更改页面名" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="页面名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePageName">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  Component,
  Emit,
  Inject,
  Model,
  Prop,
  Provide,
  Vue,
  Watch
} from "vue-property-decorator";
import { get_page_list, savePageName } from "@/api/index.js";
import page_item from "./component/page.vue";
import { base_url } from "@/utils/request/config";

@Component({
  components: { page_item }
})
export default class App extends Vue {
  page_list = [];
  loading = false;
  dialogFormVisible = false;
  formLabelWidth = "100px";
  form = { name: "" };
  page_number = [];
  page = 1;
  activated() {}
  mounted() {
    this.getData(1);
  }
  domload(item) {
    location.href = base_url + "/downloadPage?pageName=" + item.pageName;
    //   http://106.12.76.26:3560/downloadPage?pageName=home
  }
  getData(page) {
    if (this.loading) return;
    this.loading = true;
    this.page = page;
    get_page_list({ page }).then(res => {
      this.loading = false;
      this.page_list = res.result;
      let count = Math.ceil(res.count / 8);
      this.page_number = [];
      for (let i = 0; i < count; i++) this.page_number.push(i + 1);
    });
  }
  updatePageName(item) {
    this.form.name = item.pageTitle;
    this.form.id = item.id;
    this.dialogFormVisible = true;
  }
  savePageName() {
    savePageName(this.form).then(res => {
      this.dialogFormVisible = false;
      this.getData(this.page);
    });
  }
  edit_page(item) {
    this.$router.push({
      name: "index",
      query: {
        pageName: item.pageName
      }
    });
  }
}
</script>

<style lang="less" scoped >
@import "./index.less";
</style>